#{extends 'User.html' /}

<div id="moreinfors" style="z-index: 800;">
    <div style="border: solid 1px;">
        <div class="m_header">&{'user.topic.moreinfo_title'}</div>
        <ul>
        #{list items:topic.moreInfos.asList(), as:"moreInfo"}
            <li>${moreInfo.title} . <a href="${moreInfo.link}">View</a></li>
        #{/list}
            </li>
        </ul>
    </div>
</div>
<script type="text/javascript">

    $(document).ready(function () {
        $(".scrollable").scrollable();
    });

</script>

<div id="mainContent">

    <img alt="Spraying System Co. - The Industry's Largest Selection of Conventional Spray Nozzles"
         src="@{User.getTopicImage(topic.id, 2)}">

    <h1> ${topic.title}</h1>
    ${topic.desc.raw()}

    #{if relatedTopics.size()>0  }
        <h3>&{'user.topic.related_title'}</h3>
    #{/if}

</div>
<br class="clearfloat">

#{if relatedTopics.size()>0  }
<div id="sliderContain">
    <a class="prev browse left disabled"></a>

    <div class="scrollable">
        <!-- root element for the items -->
        <div class="items" style="left: 0px; ">
        #{list items:relatedTopics, as:'topic' }
            #{if topic_index %5 ==1 }
                <div>
            #{/if}
            <div class="tab_caption">
                    <h4><a href="/user/topic?code=${topic.code}" target="_blank">${topic.name}</a></h4>
                    <img src="@{User.getTopicImage(topic.topicId, 1)}" width="100" height="100" alt="${topic.name}">
            </div>
            #{if topic_index % 5 ==0 || topic_isLast}
                </div>
            #{/if}

        #{/list}


        </div>
    </div>
    <a class="next browse right"></a>
</div>
#{/if}

<br class="clearfloat">
